import * as React from 'react'
import { Link } from 'react-router-dom'
import style from './style.module.less'
import { store } from '../../mobx/Store'

function Main() {
  return (
    <div className={style.main}>
      <img
        className={style.main_img}
        src="http://p.timepill.net/img/logo_big.png"
      />
      <div className={style.main_top}>时间胶囊</div>
      {store.click ? (
        <div className={style.main_bottom}>
          <Link className={style.main_text_left} to="/put">
            <div className={style.main_text_1}>Put</div>
            <div className={style.main_text_2}>添加</div>
          </Link>
          <Link className={style.main_text_right} to="/open">
            <div className={style.main_text_1}>Open</div>
            <div className={style.main_text_2}>打开</div>
          </Link>
        </div>
      ) : (
        <div className={style.main_bottom}>
          <Link className={style.main_text_left_change} to="/put">
            <div className={style.main_text_1}>Put</div>
            <div className={style.main_text_2}>添加</div>
          </Link>
          <Link className={style.main_text_right_change} to="/open">
            <div className={style.main_text_1}>Open</div>
            <div className={style.main_text_2}>打开</div>
          </Link>
        </div>
      )}
    </div>
  )
}

export default Main
